<template>
	<view>
		<view class="headForm">
			<u-form :model="formData" ref="uForm" label-width="160">
				<u-form-item label="装卸船">
					<u-radio-group v-model="value"  @change="onradioChange">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				
				<u-form-item label="船名:" label-width="160">
					<u-input type="select" :select-open="shipNameShow" v-model="formData.ship"
						placeholder="请选择船名" @click="shipNameShow = true"></u-input>
				</u-form-item> 
				
				<u-form-item label="航次:" label-width="160">
					<u-input type="select" :select-open="shipShow" v-model="formData.shipVOYAGE"
						placeholder="请选择航次" @click="shipShow = true"></u-input>
				</u-form-item> 
				
				<u-form-item label="箱号:" label-width="160">
					<u-input v-model="formData.cntr"
						placeholder="请输入箱号" ></u-input>
				</u-form-item> 
				
				<u-form-item label="提单号:" label-width="160">
					<u-input v-model="formData.bill"
						placeholder="请输入提单号" ></u-input>
				</u-form-item> 
			</u-form> 
			
			<view class="btnGroup">
				<u-button :custom-style="customStyle" type="primary" @click="reset">重置</u-button>  
				<u-button :custom-style="customStyle" type="primary" @click="search">查询</u-button>  
			</view>
		</view>
		<view style="height: 300rpx;">
		
		</view>
		<view class="listCon">
			<view class="listItem" >
				<view style="text-align: center; font-weight: 600; font-size: 16px;">装卸船总情况表</view>
				<u-table>
					<u-tr class="u-tr">
						<u-th class="u-th">统计</u-th>
						<u-th class="u-th">20'E</u-th>
						<u-th class="u-th">20'F</u-th>
						<u-th class="u-th">40'E</u-th>
						<u-th class="u-th">40'F</u-th>
						<u-th class="u-th">45'E</u-th>
						<u-th class="u-th">45'F</u-th>
						<u-th class="u-th">TTL</u-th>
					</u-tr>
					<u-tr class="u-tr">
						<u-td>总数量</u-td>
						<u-td>{{ e20_z }}</u-td>
						<u-td>{{ f20_z }}</u-td>
						<u-td>{{ e40_z }}</u-td>
						<u-td>{{ f40_z }}</u-td>
						<u-td>{{ e45_z }}</u-td>
						<u-td>{{ f45_z }}</u-td>
						<u-td>{{ TTL_z }}</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td>已完成</u-td>
						<u-td>{{ e20_y }}</u-td>
						<u-td>{{ f20_y }}</u-td>
						<u-td>{{ e40_y }}</u-td>
						<u-td>{{ f40_y }}</u-td>
						<u-td>{{ e45_y }}</u-td>
						<u-td>{{ f45_y }}</u-td>
						<u-td>{{ TTL_y }}</u-td>
					</u-tr>
					<u-tr class="u-tr">
						<u-td>未完成</u-td>
						<u-td>{{ e20_w }}</u-td>
						<u-td>{{ f20_w }}</u-td>
						<u-td>{{ e40_w }}</u-td>
						<u-td>{{ f40_w }}</u-td>
						<u-td>{{ e45_w }}</u-td>
						<u-td>{{ f45_w }}</u-td>
						<u-td>{{ TTL_w }}</u-td>
					</u-tr>
				</u-table>
				
				<view style="text-align: center; font-weight: 600; font-size: 16px;">装卸船清单</view>
				<u-table>
					<u-tr class="u-tr">
						<u-th class="u-th">箱号</u-th>
						<u-th class="u-th">尺寸</u-th>
						<u-th class="u-th">类型</u-th>
						<u-th class="u-th">空重</u-th>
						<u-th class="u-th">内外贸</u-th>
						<u-th class="u-th">装卸标志</u-th>
					</u-tr>
					<u-tr class="u-tr" v-for="(item, index) in datalist" :key="index">
						<u-td class="u-td" >{{ item.CTNNO }}</u-td>
						<u-td class="u-td">{{ item.CTNSIZE }}</u-td>
						<u-td class="u-td">{{ item.CTNTYPE }}</u-td>
						<u-td class="u-td">{{ item.CTNSTATUS === 'E' ? '空' : '重' }}</u-td>
						<u-td class="u-td">{{ item.IF_ID }}</u-td>
						<u-td class="u-td">{{ item.LOADDIS_ID }}</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
		<u-select mode="single-column" :list="shipNameList" v-model="shipNameShow" @confirm="shipNameConfirm"
			value-name="VSLNAME" label-name="VSLNAME"  >
		</u-select>
		<u-select mode="single-column" :list="shipList" v-model="shipShow" @confirm="shipConfirm"
			value-name="VOYAGE" label-name="VOYAGE"  >
		</u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					height: '60rpx',
				},
				value: "装船" ,
				shipNameList: [],
				shipList: [],
				datalist: [],
				shipShow: false,
				shipNameShow: false,
				formData: {
					ship: '', //船名
					vslname: '',	// 船名（用作参数了参数）
					shipVOYAGE: '', // 航次
					cntr: '',  // 箱号
					bill: ''   // 提单号
				},
				radioList: [
					{
						name: '装船',
						disable: false,
						io_id: '1'
					},
					{
						name: '卸船',
						disable: false,
						io_id: '2'
					}
				],
				// 总数量对应行数据
				e20_z: 0,
				f20_z: 0,
				e40_z: 0,
				f40_z: 0,
				e45_z: 0,
				f45_z: 0,
				TTL_z: 0,
				
				// 已完成对应行数据
				e20_y: 0,
				f20_y: 0,
				e40_y: 0,
				f40_y: 0,
				e45_y: 0,
				f45_y: 0,
				TTL_y: 0,
				
				// 未完成对应行数据
				e20_w: 0,
				f20_w: 0,
				e40_w: 0,
				f40_w: 0,
				e45_w: 0,
				f45_w: 0,
				TTL_w: 0
			};
		},
		onLoad() {
			this.getOptions('e')
		},
		methods: {
			// 获取船名
			getOptions(io_id) {
				uni.request({
					// url: 'https://api.zlkj-port.com/yqapi/ITally/xhtt/Q/mLM9l3OumcLM3WF?io_id=' + io_id,
					url: 'https://api.zlkj-port.com/DF-TALLY/zlkj/jk/getshipname',
					method: 'post',
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					data: {
						io_id: io_id,
					},
					success: (res) => {
						this.shipNameList = res.data.rows
					}
				})
			},
			getOptionsBy1(io_id, vslname){
				uni.request({
					// url: 'https://api.zlkj-port.com/yqapi/ITally/xhtt/Q/z4q4eNM4Xqb2pFH',
					url: 'https://api.zlkj-port.com/DF-TALLY/zlkj/jk/getvoyage',
					method: 'post',
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					data: {
						io_id: io_id,
						vslname: vslname
					},
					success: (res) => {
						console.log(res)
						this.shipList = res.data.rows
						console.log(this.shipList)
					}
				})
			},
			search() {
				if(this.value === '装船') {
					this.searchAPI('e') // e
				} else {
					this.searchAPI('i') //i
				}
			},
			searchAPI(IO_ID) {
				// https://api.zlkj-port.com/DF-TALLY/zlkj/jk/getcntrlist
				if(this.formData.vslname !== '' && this.formData.shipVOYAGE !== '') {
					uni.request({
						// url: 'https://api.zlkj-port.com/yqapi/ITally/xhtt/Q/An0xZJooWLJXcLh',
						url: 'https://api.zlkj-port.com/DF-TALLY/zlkj/jk/getcntrlist',
						method: 'post',
						header: {
							'Content-Type': 'application/json;charset=UTF-8'
						},
						data: {
							vslname: this.formData.vslname,
							voyage: this.formData.shipVOYAGE,
							IO_ID: IO_ID,
							BLNO: this.formData.bill
						},
						success: (res) => {
							this.datalist = res.data.rows
							
							this.e20_z = this.datalist.filter(item => item.CTNSTATUS === 'E' && item.CTNSIZE === '20').length
							this.f20_z = this.datalist.filter(item => item.CTNSTATUS === 'F' && item.CTNSIZE === '20').length
							this.e40_z = this.datalist.filter(item => item.CTNSTATUS === 'E' && item.CTNSIZE === '40').length
							this.f40_z = this.datalist.filter(item => item.CTNSTATUS === 'F' && item.CTNSIZE === '40').length
							this.e45_z = this.datalist.filter(item => item.CTNSTATUS === 'E' && item.CTNSIZE === '45').length
							this.f45_z = this.datalist.filter(item => item.CTNSTATUS === 'F' && item.CTNSIZE === '45').length
							this.TTL_z = this.e20_z + this.f20_z + this.e40_z + this.f40_z + this.e45_z + this.f45_z
							
							this.e20_y = this.datalist.filter(item => item.CTNSTATUS === 'E' && item.CTNSIZE === '20' && item.LOADDIS_ID === 'Y').length
							this.f20_y = this.datalist.filter(item => item.CTNSTATUS === 'F' && item.CTNSIZE === '20' && item.LOADDIS_ID === 'Y').length
							this.e40_y = this.datalist.filter(item => item.CTNSTATUS === 'E' && item.CTNSIZE === '40' && item.LOADDIS_ID === 'Y').length
							this.f40_y = this.datalist.filter(item => item.CTNSTATUS === 'F' && item.CTNSIZE === '40' && item.LOADDIS_ID === 'Y').length
							this.e45_y = this.datalist.filter(item => item.CTNSTATUS === 'E' && item.CTNSIZE === '45' && item.LOADDIS_ID === 'Y').length
							this.f45_y = this.datalist.filter(item => item.CTNSTATUS === 'F' && item.CTNSIZE === '45' && item.LOADDIS_ID === 'Y').length
							this.TTL_y = this.e20_y + this.f20_y + this.e40_y + this.f40_y + this.e45_y + this.f45_y
							
							this.e20_w = this.e20_z - this.e20_y
							this.f20_w = this.f20_z - this.f20_y
							this.e40_w = this.e40_z - this.e40_y
							this.f40_w = this.f40_z - this.f40_y
							this.e45_w = this.e45_z - this.e45_y
							this.f45_w = this.f45_z - this.f45_y
							this.TTL_w = this.e20_w + this.f20_w + this.e40_w + this.f40_w + this.e45_w + this.f45_w
						}
					})
				} else {
					uni.showToast({
						title: '请先选择船名和航次',
						icon: 'none'
					})
				}
			},
			reset() {
				this.formData = {
					ship: '', //船名
					vslname: '',	// 船名（用作参数了参数）
					shipVOYAGE: '', // 航次
					cntr: '',  // 箱号
					bill: ''   // 提单号
				}
			},
			onradioChange(e) {
					if(this.value === '装船') {
						this.reset()	
						this.getOptions('e')
					} else {
						this.reset()
						this.getOptions('i')
					}	
			},
			shipNameConfirm(e) {
				this.formData.ship = e[0].label
				this.formData.vslname = e[0].label  // 船名参数赋值
					if(this.value === '装船') {
						this.getOptionsBy1('e', this.formData.vslname)
					} else {
						this.getOptionsBy1('i', this.formData.vslname)
					}
			},
			shipConfirm(e) {
				this.formData.shipVOYAGE = e[0].value
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		padding: 6rpx !important;
	}
	::v-deep .u-btn {
		height: 20px;
	}
.headForm {
		padding: 20rpx;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10;
		background-color: #FFFFFF;

		.btnGroup {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 45rpx;
		}
	}
	.listCon {
		.listItem {
			padding-top: 150px;
			}
		}
</style>
